@import "../varibles";
@import "../mixins/mixin";
@import "../animation/actions";

.vue-actions{
	z-index:10001;
}
.vue-actions-container{
	margin:0 $message_padding;
	border-radius:5px;
	background-color: $message_bg_col;
	color:$message_text_col;
}
.vue-actions-header{
	position:relative;
	text-align:center;
	font-weight:bold;
	padding:10px 15px;
}

.vue-actions-body{
	position:relative;
}

.vue-actions-item{
	padding:10px 15px;
	border-top:$message_border;
	&:hover{
		background-color: darken(#fff,5%);
	}
}

.vue-actions-btns{
	display: table;
	width:100%;
	table-layout:fixed;
	border-radius:5px;
}
.vue-actions-footer{
	padding:$message_padding;
}

.vue-actions-btn{
    display: table-cell;
    width: 100%;
    padding: 10px;
    text-align: center;
	border-radius:5px;
    background-color: $message_btn_bg;
	
    &:hover{
    	background-color: darken($message_btn_bg,5%);
    }
}

.vue-actions-top{
	position: fixed;
	top:0;
	left:0;
	width:100%;
}


.vue-actions-center{
	position:fixed;
	top:42%;
	left:5%;
	width:90%;
}


.vue-actions-bottom{
	position: fixed;
	bottom:0;
	left:0;
	width:100%;
}